<template>
  <div style="padding: 20px">
    <Alert message="文字示例" type="info" show-icon>
      <template #icon><smile-outlined /></template>
    </Alert>
    <div class="demoTittle">文字链接基础用法</div>
    <a-space direction="vertical">
      <a-space :size="60">
        <div class="color666666">default</div>
        <a-typography-link type="secondary">默认链接</a-typography-link>
        <a-typography-link>主要链接</a-typography-link>
        <a-typography-link type="warning">警告链接</a-typography-link>
        <a-typography-link type="danger">危险链接</a-typography-link>
        <a-typography-link>信息链接</a-typography-link>
      </a-space>
      <!-- <a-space :size="60">
        <div class="color666666" style="width: 43px">hover</div>
        <a-typography-link type="secondary" underline>默认链接</a-typography-link>
        <a-typography-link class="onfo" underline>主要链接</a-typography-link>
        <a-typography-link type="warning" underline>警告链接</a-typography-link>
        <a-typography-link type="danger" underline>危险链接</a-typography-link>
        <a-typography-link underline>信息链接</a-typography-link>
      </a-space> -->
      <a-space :size="60">
        <div class="color666666">disable</div>
        <a-typography-text type="secondary" disabled>默认链接</a-typography-text>
        <a-typography-text class="onfo" disabled>主要链接</a-typography-text>
        <a-typography-text type="warning" disabled>警告链接</a-typography-text>
        <a-typography-text type="danger" disabled>危险链接</a-typography-text>
        <a-typography-text class="onfo" disabled>信息链接</a-typography-text>
      </a-space>
    </a-space>
    <div class="demoTittle">文字状态</div>
    <a-space :size="40" align="start">
      <a-space direction="vertical">
        <a-typography-text type="success">状态：进行中</a-typography-text>
        <a-typography-text type="warning">状态：待处理</a-typography-text>
        <a-typography-text type="danger">状态：警告</a-typography-text>
        <a-typography-text class="other">备用：备用色</a-typography-text>
      </a-space>
      <a-space direction="vertical">
        <a-typography-text class="onfo">状态：进行中</a-typography-text>
        <a-typography-text type="secondary">状态：已完成</a-typography-text>
        <a-typography-text type="secondary" disabled>状态：已失效</a-typography-text>
      </a-space>
    </a-space>
    <div class="demoTittle">多行文本</div>
    <div style="width: 50%">
      <a-typography-paragraph
        :ellipsis="
          ellipsis
            ? { rows: 2, expandable: true, symbol: '展开' }
            : { expandable: false, symbol: '收起' }
        "
        content="多行文本省略。你可以通过 属性配置省略展示内容，大量文本时推荐优先使用。多行文本省略。你可以通过 属性配置省略展示内容，大量文本时推荐优先使用。多行文本省略。你可以通过 属性配置省略展示内容，大量文本时推荐优先使用。多行文本省略。你可以通过 属性配置省略展示内容，大量文本时推荐优先使用。"
      />
    </div>
    <div class="wrap">
      <input type="checkbox" id="switch" class="input" />
      <div class="text">
        <label class="btn" for="switch"></label>
        在清晨的微光中，小镇被一层薄薄的雾气轻轻笼罩，仿佛披上了一层神秘的面纱。
        街道两旁的梧桐树在微风中轻轻摇曳，发出沙沙的声响，像是在诉说着不为人知的故事。
        远处，炊烟袅袅升起，带着家的温馨和生活的气息。偶尔，一阵清脆的鸟鸣划破寂静，
        为这宁静的早晨增添了几分生机。人们开始陆续走出家门，迎接新的一天，
        他们的脸上洋溢着期待和希望，仿佛在告诉世界，这里是一个充满活力和希望的地方。
      </div>
    </div>
    <div class="demoTittle">可编辑文本</div>
    <a-typography-paragraph v-model:content="customEnterIconStr" editable>
      <template #editableEnterIcon="{ className }">
        <div :class="className" style="color: #0052d9; line-height: 16px"> 完成 </div>
      </template>
    </a-typography-paragraph>
    <a-typography-paragraph
      v-model:content="lengthLimitedStr"
      :editable="{ maxlength: 50, autoSize: { maxRows: 5, minRows: 3 } }"
    >
      <template #editableEnterIcon="{ className }">
        <div :class="className" style="color: #0052d9; line-height: 50px">完成</div>
      </template>
    </a-typography-paragraph>
  </div>
</template>
<script setup lang="ts">
  import { Alert, Typography } from 'ant-design-vue';
  import { SmileOutlined } from '@ant-design/icons-vue';
  import { ref } from 'vue';
  const ellipsis = ref(true);
  const customEnterIconStr = ref('我是可编辑文本');
  const lengthLimitedStr = ref('我是可编辑文本');
</script>
<style lang="less" scoped>
  .demoTittle {
    font-size: 20px;
    font-weight: 400;
    color: #444444;
    margin: 20px 0;
  }

  //悬浮
  a.ant-typography:hover {
    color: #1677ff;
    text-decoration: underline;
  }

  .ant-typography.ant-typography-ellipsis:hover {
    text-decoration: none;
  }

  .ant-typography.ant-typography-warning:hover {
    color: #f5820f;
  }

  .ant-typography.ant-typography-danger:hover {
    color: #e22c4c;
  }

  .ant-typography.ant-typography-secondary {
    color: #666666;
  }
  .ant-typography.ant-typography-secondary:hover {
    color: #0052d9;
  }
  .ant-typography.ant-typography-secondary.ant-typography-disabled {
    color: rgba(153, 153, 153, 1);
  }
  .ant-typography.ant-typography-success {
    color: #09b840;
  }
  .ant-typography.ant-typography-warning {
    color: #f5820f;
  }
  .ant-typography.ant-typography-warning.ant-typography-disabled {
    color: rgba(245, 130, 15, 0.5);
  }
  .ant-typography.ant-typography-danger {
    color: #e22c4c;
  }
  .ant-typography.ant-typography-danger.ant-typography-disabled {
    color: rgba(226, 44, 76, 0.5);
  }
  .ant-typography .ant-typography-edit {
    color: #1677ff;
  }
  .onfo {
    color: #1677ff;
  }
  .ant-typography.onfo.ant-typography-disabled {
    color: rgba(0, 82, 217, 0.5);
  }
  .other {
    color: #8a3fd4;
  }
  .color666666 {
    color: #666666;
  }
</style>
<style>
  * {
    margin: 0;
    padding: 0;
  }
  .wrap {
    max-width: 750px;
    display: flex;
    padding: 16px;
    border: 1px solid rgba(0, 0, 0, 0.2);
    /* margin: 20px 100px; */
    overflow: hidden;
    border-radius: 12px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
    position: relative;
  }

  .text {
    color: #666666;
    line-height: 1.5;
    max-height: 4.5em;
    overflow: hidden;
  }
  .text::before {
    content: '';
    float: right;
    width: 0;
    height: 100%;
    margin-bottom: -24px;
  }
  .text::after {
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    background-color: #fff;
  }
  .btn {
    float: right;
    clear: both;
  }
  .btn::before {
    content: '...';
    position: absolute;
  }
  .btn::after {
    content: '展开';
    padding-left: 15px;
  }
  .input {
    display: none;
  }
  .input:checked + .text {
    max-height: none;
  }
  .input:checked + .text .btn::after {
    content: '收起';
  }
  .input:checked + .text::after {
    visibility: hidden;
  }
  .input:checked + .text .btn::before {
    content: '';
  }
</style>
